{extend name="public:layout" /}
{block name="title"}当前在线{/block}
{block name="head"}
<script src="/public/plugins/template/template.js"></script>
<script src="/public/plugins/echarts/echarts-all.js"></script>
<style>
    .echarts {
        height: 400px;
    }
</style>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox" style="background: #fff;">
        {include file="cnzz/menu" /}
    </div>
    <h1 class="text-center"><span class="text-danger" id="time">60</span>S后更新数据</h1>
    <div id="totalTpl"></div>
    <script id="ajaxTotalTpl" type="text/html">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>最近15分钟浏览次数</h5>
                        <h1 class="no-margins">{{ total_pv }}</h1>
                        <small>{{ time }}</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>最近15分钟独立访客</h5>
                        <h1 class="no-margins">{{ total_uv }}</h1>
                        <small>{{ time }}</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>最近15分钟IP</h5>
                        <h1 class="no-margins">{{ total_ip }}</h1>
                        <small>{{ time }}</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>今日最高</h5>
                        <h1 class="no-margins">{{ high }}</h1>
                        <div class="stat-percent font-bold text-danger">{{ high_time }}</div>
                        <small>发生时间</small>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <div class="ibox">
        <div class="ibox-content">
            <div class="echarts" id="echarts-line-chart"></div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
    <script>
        $(function(){
            setInterval(actionTime,1000);
            setTotalTpl();
            getLine();
        })
        //定时执行
        function actionTime() {
            var timeText = parseInt($('#time').text());
            if(timeText==1){
                $('#time').text(0);
                setTotalTpl();
                getLine();
                $('#time').text(60);
            }else{
                var time = timeText-1;
                $('#time').text(time);
            }
        }
        function setTotalTpl() {
            getAjax("{:url('ajaxfowRealtime')}",'',function (data) {
                var html = template('ajaxTotalTpl', data);
                $('#totalTpl').html(html);
            })
        }
        //组装折线图
        function getLine(){
            getAjax("{:url('ajaxflowRealtimeLine')}",'',function (lineData) {
                var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                var lineoption = {
                    title : {text: lineData.title.text},
                    tooltip : {trigger: 'axis'},
                    legend: {data:lineData.legend.data},
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : lineData.xAxis.data
                        }
                    ],
                    yAxis : [{type : 'value'}],
                    series : lineData.series
                };
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            })
        }
    </script>
{/block}